<template>
    <div>
        <span v-on:click="isSelected=0" :class="{active:isSelected==0}">帮我买</span>&nbsp;
        <span v-on:click="isSelected=1" :class="{active:isSelected==1}">帮我取</span>&nbsp;
        <span v-on:click="isSelected=2" :class="{active:isSelected==2}">帮我送</span>
        <div>
            <div style="padding-top: 10px">
                用户手机号:<input type="text" style="height: 36px">
                下单人姓名:<input type="text" style="height: 36px">
                状态:<el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
                所属门店:<input type="text" style="height: 36px">
            </div>
            <div style="padding-top: 10px">
                下单日期:<el-date-picker
                    v-model="value1"
                    type="daterange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
            </el-date-picker>
                <el-button type="primary">搜索</el-button>
            </div>
        </div>
        <div style="padding-top:10px">
            <h1 v-if="isSelected==0"  ></h1>
            <!--        表格-->
            <h1 v-else-if="isSelected==1">
                <el-table
                        :data="orderList.list"
                        border
                        style="width: 1200px"
                        color:black
                        :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
                    <el-table-column
                            fixed
                            prop="shopName"
                            label="订单ID"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="shopId"
                            label="用户手机号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopPhone"
                            label="昵称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopAddress"
                            label="收件地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopDescribe"
                            label="取件码图片"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopLatitude:"
                            label="备注信息"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopOrderCount"
                            label="取货点"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="distance"
                            label="取货地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopStatus"
                            label="下单时间"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopStatus"
                            label="状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">

                    </el-table-column>
                </el-table>
            </h1>
            <h1 v-else>
                <el-table
                        :data="orderList.list"
                        border
                        style="width: 1200px"
                        color:black
                        :header-cell-style="{'background-color':'#409EFF',
color:'#fff'}">
                    <el-table-column
                            fixed
                            prop="shopName"
                            label="订单ID"
                            width="150">
                    </el-table-column>
                    <el-table-column
                            prop="shopId"
                            label="用户手机号"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopPhone"
                            label="昵称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopAddress"
                            label="地址"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopDescribe"
                            label="发件信息"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopLatitude:"
                            label="收件信息"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopOrderCount"
                            label="备注信息"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="distance"
                            label="下单时间"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="shopStatus"
                            label="状态"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            label="操作"
                            width="100">

                    </el-table-column>
                </el-table>
            </h1>
        </div>

        <div class="block">
            <el-pagination
                    layout="prev, pager, next"
                    :total="1">
            </el-pagination>
        </div>

    </div>
</template>



<script>
    export default {
        name: "OrderManger",
        data:function () {
            return{
                options: [{
                    value: '选项1',
                    label: '全部',

                }, {
                    value: '选项2',
                    label: '已取消'
                }, {
                    value: '选项3',
                    label: '待接单'
                }, {
                    value: '选项4',
                    label: '已接单配送中'
                }, {
                    value: '选项5',
                    label: '已完成'
                }],
                value1: '',
                value:"",
                isSelected:0,
                orderList:{},
            }

            },

        }


</script>

<style scoped>
    .active{
        color: skyblue;
    }
</style>